<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>地图标记点管理系统</title>
    <script src="https://webapi.amap.com/loader.js"></script>
    <style>
        /* 页面布局 */
        body {
            display: flex;
            margin: 0;
            height: 100vh;
            font-family: Arial, sans-serif;
        }

        /* 功能区样式 */
        #function-area {
            width: 300px;
            padding: 20px;
            background-color: #f4f4f4;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            overflow-y: auto;
        }

        /* 显示区样式 */
        #display-area {
            flex: 1;
            position: relative;
        }

        /* 输入框和按钮样式 */
        .input-group {
            margin-bottom: 15px;
        }

        input[type="text"], button {
            width: 100%;
            padding: 8px;
            margin: 5px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
            transition: background 0.3s;
        }

        button:hover {
            background-color: #0056b3;
        }

        #coordinates {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: white;
            padding: 10px;
            border-radius: 4px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            z-index: 999;
        }
        /* 新增文件上传样式 */
        .file-input {
            display: none;
        }
        .file-upload-label {
            display: block;
            text-align: center;
            padding: 8px;
            background: #28a745;
            color: white;
            border-radius: 4px;
            cursor: pointer;
        }
        .file-upload-label:hover {
            background: #218838;
        }

    </style>
</head>
<body>
    <!-- 功能区 -->
    <div id="function-area">
        <div class="input-group">
            <label>经度</label>
            <input type="text" id="longitude" placeholder="点击地图获取或输入">
        </div>
        
        <div class="input-group">
            <label>纬度</label>
            <input type="text" id="latitude" placeholder="点击地图获取或输入">
        </div>

        <div class="input-group">
            <label>标记名称</label>
            <input type="text" id="marker-name" placeholder="输入标记点名称">
        </div>
        <button id="add-marker">添加标记</button>
        <button id="search-marker">搜索标记</button>
        <button id="clear-markers">清除所有标记</button>
        <button id="export-data">导出数据</button>
        <!-- 新增文件上传组件 -->
        <input type="file" id="file-input" class="file-input" accept=".json">
        <label for="file-input" class="file-upload-label">导入JSON文件</label>
     </div>

    <!-- 地图显示区 -->
    <div id="display-area">
        <div id="mapContainer" style="width:100%;height:100%;"></div>
        <div id="coordinates">点击地图获取坐标：未记录</div>
    </div>

<script>
// 高德地图初始化
let map;
let markers = [];
const AMapKey = "123ebe1ec145b40924c5724992b51e91"; // 替换为真实Key

// 页面元素
const longitudeInput = document.getElementById('longitude');
const latitudeInput = document.getElementById('latitude');
const markerNameInput = document.getElementById('marker-name');

// 初始化地图
window.onload = function() {
    AMapLoader.load({
        key: AMapKey,
        version: "2.0",
        plugins: ['AMap.Scale', 'AMap.ToolBar']
    }).then((AMap) => {
        map = new AMap.Map('mapContainer', {
            layers: [new AMap.TileLayer.Satellite()],
            zoom: 13,
            center: [108.378925, 22.842527]
        });
        
        // 添加控件
        map.addControl(new AMap.Scale());
        map.addControl(new AMap.ToolBar());

        // 地图点击事件
        map.on('click', function(e) {
            const lng = e.lnglat.getLng().toFixed(6);
            const lat = e.lnglat.getLat().toFixed(6);
            longitudeInput.value = lng;
            latitudeInput.value = lat;
            document.getElementById('coordinates').innerHTML = 
                `点击坐标：经度 ${lng}, 纬度 ${lat}`;
        });
    });
};

// 添加标记函数
function addMarker(lng, lat, title) {
    if (!map) return;
    // 获取当前页面的URL
    var currentURL = window.location.href;
    // 提取目录路径
    var directoryPath = currentURL.substring(0, currentURL.lastIndexOf('/') + 1);
    // 将目录路径显示在页面上
    document.getElementById('coordinates').textContent = "当前目录: " + directoryPath;
    const marker = new AMap.Marker({
        position: [parseFloat(lng), parseFloat(lat)],
        map: map,
        title: title,
        icon: directoryPath + "towerdot.png"
    });
    // 信息窗口
    marker.on('click', () => {
        new AMap.InfoWindow({
            content: `<strong>${title}</strong><br>经纬度:${lng},${lat}`
        }).open(map, marker.getPosition());
    });

    markers.push(marker);
}
// NEW: 添加文件导入功能
document.getElementById('file-input').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(event) {
        try {
            const importedData = JSON.parse(event.target.result);
            
            // 验证数据格式
            if (!Array.isArray(importedData)) {
                throw new Error("无效的JSON格式");
            }

            importedData.forEach(marker => {
                if (!marker.lng || !marker.lat || !marker.title) {
                    throw new Error("缺少必要字段: lng/lat/title");
                }
                addMarker(marker.lng, marker.lat, marker.title);
            });
        } catch (error) {
            alert(`导入失败: ${error.message}`);
        }
    };
    reader.readAsText(file);
});
// 事件监听
document.getElementById('add-marker').addEventListener('click', () => {
    const lng = longitudeInput.value;
    const lat = latitudeInput.value;
    const title = markerNameInput.value;

    if (!lng || !lat) return alert("请先获取或输入坐标！");
    if (!title) return alert("请输入标记名称！");
    
    addMarker(lng, lat, title);
    markerNameInput.value = ''; // 清空名称输入
});

document.getElementById('search-marker').addEventListener('click', () => {
    const keyword = prompt("请输入搜索关键词：");
    if (!keyword) return;

    const found = markers.find(marker => 
        marker.getTitle().includes(keyword)
    );

    if (found) {
        map.setCenter(found.getPosition());
        map.setZoom(16);
        found.emit('click'); // 触发点击显示信息窗口
    } else {
        alert("未找到匹配标记！");
    }
});

document.getElementById('clear-markers').addEventListener('click', () => {
    markers.forEach(marker => marker.setMap(null));
    markers = [];
    alert("已清除所有标记！");
});

document.getElementById('export-data').addEventListener('click', () => {
    const data = markers.map(marker => ({
        lng: marker.getPosition().lng,
        lat: marker.getPosition().lat,
        title: marker.getTitle()
    }));
    
    const blob = new Blob([JSON.stringify(data)], {type: 'application/json'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'markers.json';
    a.click();
});
</script>
</body>
</html>